<template>
  <view class="pages header-bg">
    <!-- 标题栏  start-->
    <view class="cu-custom" :style="[{ height: CustomBar + 'px' }]">
    	<view class="cu-bar fixed header-bg text-white" :style="{height: CustomBar+'px',paddingTop: StatusBar+'px'}">
        <view class="action" @tap="back">
        	<text class="cuIcon-back"></text>
        </view>
    		<view class="content" :style="[{top:StatusBar+'px'}]">
    			<view class="">自购返佣</view>
    		</view>
    	</view>
    </view>
    <!-- 标题栏 end -->
    <view class="bg-white margin-lr-sm padding-tb-lg radius-16 margin-top-sm">
      <view class="margin-lr-lg solid-bottom flex align-center justify-between padding-bottom-lg">
        <view>
          <view class="text-bold fu-fs48 margin-bottom-xs" style="color: #FE5014;">{{distribuData.total | formatNumber}}</view>
          <view class="fu-fs28 text-666">累计返佣（元）</view>
        </view>
        <view class="padding-lr-lg round height-64 line-height-64 bg-theme text-white" @tap="handleJump" data-type="SWITCH" data-url="/pages/tab/home/shopindex/index">立即赚钱</view>
      </view>
      <view class="grid col-4 padding-top-lg">
        <view class="text-center">
          <view class="fu-fs36 text-bold margin-bottom-xs" style="color: #FE5014;">{{distribuData.today | formatNumber}}</view>
          <view class="text-666 fu-fs24">本日返佣(元)</view>
        </view>
        <view class="text-center">
          <view class="fu-fs36 text-bold margin-bottom-xs" style="color: #FE5014;">{{distribuData.week | formatNumber}}</view>
          <view class="text-666 fu-fs24">本周返佣(元)</view>
        </view>
        <view class="text-center">
          <view class="fu-fs36 text-bold margin-bottom-xs" style="color: #FE5014;">{{distribuData.week | formatNumber}}</view>
          <view class="text-666 fu-fs24">本月返佣(元)</view>
        </view>
        <view class="text-center">
          <view class="fu-fs36 text-bold margin-bottom-xs" style="color: #FE5014;">{{distribuData.last_month | formatNumber}}</view>
          <view class="text-666 fu-fs24">上月返佣(元)</view>
        </view>
      </view>
    </view>
    <view class="margin-lr-sm padding-lr-sm margin-top flex align-center justify-between">
      <view class="flex align-center text-bold text-333 fu-fs32 title-block">返佣明细</view>
      <view class="text-999 text-sm" @tap="handleJump" data-url="/pages/wallet/rebate-detail/index">
        查看全部
        <text class="lg text-999 cuIcon-right"></text>
      </view>
    </view>
    <!-- 返佣明细 start -->
    <view class="margin-top-sm margin-lr-sm">
      <block v-for="(item,index) in listData" :key="index">
        <rebate-item :item="item"></rebate-item>
      </block>
    </view>
    <!-- 返佣明细 end -->
    <!-- 分页组件 start -->
    <fu-empty :pagingListLoadedAll="pagingListLoadedAll" :pagingListNoListData="pagingListNoListData" :listDataLength="listDataLength" :isLoadInit="isLoadInit"></fu-empty>
    <!-- 分页组件 end -->
    <!-- 网络监测 start -->
    <fu-notwork></fu-notwork>
    <!-- 网络监测 end -->
  </view>
</template>

<script>
  import pagingList from '@/common/mixin/paging_list.js' //引入混合开发
  import rebateItem from '../components/rebate-item/rebate-item.vue';
  export default {
    mixins: [pagingList],
    components: {
      rebateItem
    },
    data() {
      return {
        minixPagingListsApi: global.apiUrls.postDistributionOrder, //明细请求地址
        pageingListApiMethod: "post", //请求方法
        // TODO: 接口未对接 对接后将false改为true
        allowOnloadGetList: true, // 是否允许页面onload生命周期进入后立马执行getlist
        start_data:'',
        end_data:'',
        distribuData:{},
      }
    },
    onLoad() {
      this.loadData()
    },
    methods: {
      //获取分销数据
      loadData(){
        this.$api.post(global.apiUrls.getdistribuDetail,{type:1}).then(res=>{
          if(res.data.code==1){
            this.distribuData =res.data.data
          }
        })
      },
      // 返回
      back() {
         uni.navigateBack();
      },
      /**
       * @description  设置要请求的参数
       * 在混入开发时，调用该方法和混入的请求参数合并在一起
       */
      pagingListPostData() {
        return {
          pagesize: 10,
          start_data: this.start_data,
          end_data: this.end_data,
          change_type: 1
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  .pages{
    background: #F6F7F9;
    &.header-bg {
    	background-image: url($IMG_BASE_URL + 'wallet/rebate-bg.png');
      background-repeat: no-repeat;
      background-size: 100%;
    }
  }
</style>
